<template>
<el-container>
  <el-main>
    <el-row>
      <el-col :span="2" class="height40">
        入职站点:
      </el-col>
      <el-col :span="15">
        <el-cascader v-model="empForm.siteId" :options="allProvince" filterable :show-all-levels="false"></el-cascader>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        职位:
      </el-col>
      <el-col :span="15">
        <el-select v-model="empForm.postId" placeholder="请选择">
          <el-option
            v-for="post in this.posts"
            :key="post.postId"
            :label="post.postName"
            :value="post.postId">
            <span style="float: left">{{ post.postName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ post.postExplain }}</span>
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        姓名:
      </el-col>
      <el-col :span="15">
        <el-input v-model="empForm.empName" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        联系方式:
      </el-col>
      <el-col :span="15">
        <el-input v-model="empForm.empTel" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        密码:
      </el-col>
      <el-col :span="15">
        <el-input v-model="empForm.empPwd"></el-input>
      </el-col>
    </el-row>
  </el-main>
  <el-aside width="30%">
    <el-button type="primary" icon="el-icon-success" round @click="insertEmps" style="margin: 150px 0 50px 0">添加员工</el-button><br>
    <el-button type="info" icon="el-icon-error" round @click="clear">清空.......</el-button>
  </el-aside>
</el-container>
</template>

<script>
import {getAllPost} from 'network/post.js'
import {addEmp} from 'network/employee.js'

let loginAccount = JSON.parse(sessionStorage.loginAccount)

export default {
  data() {
    return {
      posts: [],
      empForm: {
        siteId: '',
        postId: '',
        empName: '',
        empTel: '',
        empPwd: '111111',
      }
    }
  },
  computed: {
    allProvince() {
      let options = []
      this.$store.state.modules.proCityArea.province.forEach((pro,index) => {
        if(pro.proName == loginAccount.sitetb.areatb.citytb.province.proName) {
          options.push({label:pro.proName,children: []})
          pro.citys.forEach((city,ind) => {
            options[0].children.push({value:city.cityName,label:city.cityName,children: []})
            city.areas.forEach((area,i) => {
              options[0].children[ind].children.push({label:area.areaName,children: []})
              area.sitetbs.forEach((site) => {
                options[0].children[ind].children[i].children.push({value:site.siteId,label:site.siteName})
              })
            })
          })
        }
      })
      return options
    }
  },
  methods: {
    insertEmps() {
      this.empForm.siteId = this.empForm.siteId[3]
      if(this.empForm.siteId == null || this.empForm.siteId == '') {
        this.$message({
          showClose: true,
          message: '请选择站点',
          type: 'error'
        });
        return false
      }
      if(this.empForm.postId == null || this.empForm.postId == '') {
        this.$message({
          showClose: true,
          message: '请选择职位',
          type: 'error'
        });
        return false
      }
      if(this.empForm.empName == null || this.empForm.empName == '') {
        this.$message({
          showClose: true,
          message: '请输入姓名',
          type: 'error'
        });
        return false
      }
      if(this.empForm.empTel == null || this.empForm.empTel == '') {
        this.$message({
          showClose: true,
          message: '请输入联系方式',
          type: 'error'
        });
        return false
      }
      addEmp(this.empForm).then(res => {
        if(res == 0) {
          this.$message.error("添加失败,请稍后重试");
        }else{
          this.$message({
            showClose: true,
            message: '添加成功,账号:'+res,
            type: 'success'
          });
          this.clear()
        }
      }).catch(err => {
        console.log(err)
        this.$message.error("添加失败,请稍后重试");
      })
    },
    clear() {
      this.empForm = this.$options.data().empForm
    }
  },
  mounted() {
    getAllPost().then(res => {
      for(let post of res) {
        if(post.postId > 2) {
          this.posts.push(post)
        }
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>
.height40{
  line-height:40px
}
.el-row{
  margin-bottom: 50px;
}
</style>
